<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jq/jquery1.9/jquery-1.9.0.js"></script>
    <script>
         $(function(){
            $("#btn1").click(function(){
                $("span:first").css("background","red");
            });
            $("#btn2").click(function(){
                $("p:last").css("background","green");
            });
            $("#btn3").click(function(){
                $("div.hehe").css("background","yellow");
            });
            $("#btn4").click(function(){
                $("div:not(.hehe)").css("background","lightgreen");
            });

            $("#btn5").click(function(){
                //索引为偶数
                $("span:even").css("background","yellow");
            });

            $("#btn6").click(function(){
                $("span:odd").css("background","hotpink");
            });
            $("#btn7").click(function(){
                $("span:eq(1)").css("background","pink");
            });
            $("#btn8").click(function(){
                $("span:gt(2)").css("background","hotpink");
            });
            $("#btn9").click(function(){
                $("span:lt(1)").css("background","hotpink");
            });
            $("#btn10").click(function(){
                $("body :header").css("background","hotpink");
            });
        });
    </script>
</head>
<body>
    <input type="button" value="选择第一个span元素" id="btn1">
    <input type="button" value="选择最后一个p元素" id="btn2">
    <input type="button" value="选择class为hehe的div元素" id="btn3">
    <input type="button" value="选择clas不为hehe的div元素" id="btn4">
    <input type="button" value="选择索引为偶数的span元素" id="btn5">
    <input type="button" value="选择索引为奇数的span元素" id="btn6">
    <input type="button" value="选择索引等于1的span元素" id="btn7">
    <input type="button" value="选择索引大于2的tr元素" id="btn8">
    <input type="button" value="选择索引小于1的tr元素" id="btn9">
    <input type="button" value="选择所有的标题元素" id="btn10">
    <div id="first">itany1</div>
    <div class="hehe">itany2</div>
    <span>span</span>
    <span>span</span>
    <span>span</span>
    <span>span</span>
    <span>span</span>
    <div>itany3</div>
    <div class="hehe">itany4</div>
    <div id="last">itany5</div>
    <div class="hehe">itany6</div>
    <p>p01</p>
    <p>p02</p>
    <p>p03</p>
    <p>p04</p>
    <p>p05</p>
    <h3>h3</h3>
    <h3>h3</h3>
    <h4>h4</h4>
    <h1>h1</h1>
    <table border="1" cellspacing="0" width="500">
        <tbody>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
        </tbody>
    </table>
</body>
</html>